<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mega Menu</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: sans-serif;
        background: #f5f5f5;
      }

      .container {
        display: flex;
        height: 100vh;
        position: relative;
      }

      /* 左侧导航 */
      .sidebar {
        width: 180px;
        background: #333;
        color: #fff;
      }

      .nav-item {
        padding: 12px 16px;
        cursor: pointer;
      }

      .nav-item:hover,
      .nav-item.active {
        background-color: #007acc;
      }

      /* 二三级菜单 */
      .submenu {
        width: 700px;
        background: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: none;
        position: absolute;
        left: 180px;
        top: 0;
        z-index: 10;
      }

      .submenu.show {
        display: block;
      }

      .submenu h4 {
        margin-bottom: 8px;
        font-size: 16px;
        color: #333;
      }

      .submenu-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin-bottom: 20px;
      }

      .submenu-item {
        color: #007acc;
        cursor: pointer;
      }

      .submenu-item:hover {
        text-decoration: underline;
      }

      /* 图片区域：右侧 */
      .image-panel {
        flex-grow: 1;
        padding: 20px;
        background-color: #fff;
        overflow-y: auto;
      }

      .image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .image-grid img {
        width: 150px;
        height: 100px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="container" id="menu-area">
      <!-- 左侧导航 -->
      <div class="sidebar" id="sidebar">
        <div class="nav-item" data-category="surgery">手术科</div>
        <div class="nav-item" data-category="imaging">功能检查</div>
        <div class="nav-item" data-category="material">医用耗材</div>
      </div>

      <!-- 二三级菜单 -->
      <div class="submenu" id="submenu">
        <div id="submenu-content">
          <!-- JS 动态填充 -->
        </div>
      </div>

      <!-- 图片区域 -->
      <div class="image-panel">
        <h3>已选分类图片</h3>
        <div class="image-grid" id="image-grid"></div>
      </div>
    </div>

    <script>
      const navData = {
        surgery: {
          基础手术器械: ["手术刀", "剪刀", "骨锯", "镊子", "缝合针", "止血钳"],
          显微外科设备: ["显微镜", "显微手术器械", "显微照明灯", "显微操作臂"],
          外科设备: [
            "注射泵",
            "高频电刀",
            "吸引器",
            "无影灯",
            "手术床",
            "呼吸机",
          ],
          手术消毒: [
            "医用洗手台",
            "紫外线灯",
            "消毒柜",
            "清洗机",
            "高温灭菌器",
          ],
          急救设备: ["氧气瓶", "吸痰器", "急救箱", "电动止血带", "心电监护仪"],
        },
        imaging: {
          放射设备: [
            "数字X光机",
            "拍片机",
            "移动DR",
            "骨密度仪",
            "牙科CT",
            "摄片架",
          ],
          超声设备: ["黑白超", "彩超仪", "心脏超声", "腹部超声", "探头"],
          核磁共振: ["1.5T MRI", "3T MRI", "磁共振床", "磁共振注射器"],
          CT设备: ["16排CT", "64排CT", "128排CT", "CT配件"],
        },
        material: {
          一次性耗材: ["注射器", "输液器", "导尿管", "留置针", "采血管"],
          敷料耗材: ["纱布", "绷带", "创口贴", "压脉带", "止血棉"],
          检测耗材: ["试纸条", "采样拭子", "试剂瓶", "反应管"],
          手术耗材: ["手术衣", "手术帽", "手术洞巾", "隔离服", "防护罩"],
        },
      };

      const images = {};
      Object.values(navData).forEach((group) => {
        Object.values(group).forEach((list) => {
          list.forEach((item) => {
            images[
              item
            ] = `https://via.placeholder.com/150x100?text=${encodeURIComponent(
              item
            )}`;
          });
        });
      });

      const sidebar = document.getElementById("sidebar");
      const submenu = document.getElementById("submenu");
      const submenuContent = document.getElementById("submenu-content");
      const imageGrid = document.getElementById("image-grid");
      const menuArea = document.getElementById("menu-area");

      sidebar.addEventListener("mouseover", (e) => {
        const item = e.target.closest(".nav-item");
        if (item) {
          const category = item.dataset.category;
          showSubmenu(category);
        }
      });

      menuArea.addEventListener("mouseleave", () => {
        submenu.classList.remove("show");
      });

      function showSubmenu(category) {
        submenuContent.innerHTML = "";
        const group = navData[category];
        for (const title in group) {
          const section = document.createElement("div");
          section.innerHTML = `<h4>${title}</h4>`;
          const groupEl = document.createElement("div");
          groupEl.className = "submenu-group";
          group[title].forEach((item) => {
            const el = document.createElement("span");
            el.className = "submenu-item";
            el.textContent = item;
            el.onclick = () => showImages(item);
            groupEl.appendChild(el);
          });
          section.appendChild(groupEl);
          submenuContent.appendChild(section);
        }
        submenu.classList.add("show");
      }

      function showImages(keyword) {
        const img = images[keyword];
        if (img) {
          const imgEl = document.createElement("img");
          imgEl.src = img;
          imageGrid.appendChild(imgEl);
        }
      }
    </script>
  </body>
</html>
